﻿

@{
    ViewBag.Title = "Home Page";
}

@section scripts {
    <script type="text/javascript" src="/Scripts/knockout-3.0.0.js" ></script>
    <script type="text/javascript" src="/Scripts/q.js"></script>
    <script type="text/javascript" src="/Scripts/breeze.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="Content/jquery-easyui-1.3.4/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="Content/jquery-easyui-1.3.4/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="Content/jquery-easyui-1.3.4/demo/demo.css">
    <script type="text/javascript" src="Content/jquery-easyui-1.3.4/jquery.min.js"></script>
    <script type="text/javascript" src="Content/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>

    <script src="~/app/metadata.js"></script>

<script type="text/javascript">
        var viewModel = {
            items: ko.observableArray(),
        };
        var serviceName = 'breeze/Person';
        function createEntityManager() {

            // define the Breeze `DataService` for this app
            var dataService = new breeze.DataService({
                serviceName: serviceName,
                hasServerMetadata: false  // don't ask the server for metadata
            });

            // create the metadataStore
            var metadataStore = new breeze.MetadataStore();

            // initialize it from the application's metadata variable
            metadataStore.importMetadata(window.app.metadata);

            // create a new EntityManager that uses this metadataStore
            return new breeze.EntityManager({
                dataService: dataService,
                metadataStore: metadataStore
            });
        }

        $(function () {
            getAll();
            ko.applyBindings(viewModel);
        });
        var manager = createEntityManager();

        function getAll() {           

            var query = breeze.EntityQuery.from("Persons");       
            var data = manager.executeQuery(query);


        }
        function succeeded(data) {
            
            var count = data.results.length;
            alert(count);
            if (!count) {
                return;
            }
            

            viewModel.items(data.results);

            //var plainJs = ko.toJS(viewModel.items());
            //$('#dg').datagrid('loadData', plainJs);

        }
        function failed(error) {
            alert(error);
            viewModel.errorMessage(error);
        }

        function Local() {

            var query = breeze.EntityQuery.from("Persons");
            var data = manager.executeQueryLocally(query);
            viewModel.items(data);
        }

    </script>
}

<br/><br /><br /><br /><br /><br />

<div style="margin-top: 50px">
    <ul data-bind="foreach: items, visible: items">
        <li data-bind="with : $data">
            <input type="text" data-bind="value: Name" />
        </li>
    </ul>
</div>
<button onclick="Local()">Change</button>

@*<table id="dg" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
       data-options="singleSelect:true,collapsible:true">
    <thead>
        <tr>
            <th data-options="field:'Name',width:80">Person</th>
        </tr>
    </thead>
</table>*@



